<template>
  <el-dialog title="Mongo Verifier"
             :visible.sync="selfMongoVerifierModal"
             effect="fade"
             :close-on-click-modal="false">
    <el-form :model="mongoCollection" ref="mongoCollectionForm" :rules="mongoCollectionRules">
      <el-form-item label="table" prop="table">
        <el-input
          size="small"
          style="width:260px"
          v-model="mongoCollection.table"
          auto-complete="off"
          clearable>
        </el-input>
      </el-form-item>
      <div v-for="(item,index) in mongoCollection.criteria">
        <el-col :span="9">
          <el-form-item
            :label="'key'+(index+1)"
            :prop="'criteria.'+index+'.key'"
            :rules="{required: true, message: 'key is required', trigger: 'blur'}">
            <el-input
              size="small"
              style="width:240px"
              v-model="item.key"
              auto-complete="off"
              placeholder="key"
              clearable>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :prop="'criteria.'+index+'.value'"
                        :rules="{required: true, message: 'value is required', trigger: 'blur'}">
            <el-input
              size="small"
              style="width:360px"
              v-model="item.value"
              auto-complete="off"
              placeholder="value"
              clearable>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-button type="text" @click="removeCriteria(item)">delete</el-button>
        </el-col>
      </div>
    </el-form>
    <div slot="footer">
      <el-button type="primary" @click="addCriteria()" icon="el-icon-plus" >add criteria</el-button>
      <el-button type="primary" class="btn btn-default" @click="closeMongoCollectionDialog">OK</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export  default {
    name:'mongoCollectionDialog',
    props:{
      mongoCollection:{
        type:Object,
      },
      mongoVerifierModal : false
    },
    watch :{
      mongoVerifierModal(val) {
        this.selfMongoVerifierModal = val;
      },
      selfMongoVerifierModal(val) {
        this.$emit('onMongoVerifierModal',val);
      }
    },
    data(){
      return {
        selfMongoVerifierModal: this.mongoVerifierModal,
        mongoCollectionRules: {
          table: [
            {required: true, message: 'table is required', trigger: 'blur'}
          ],
        },
      }
    },
    methods : {
      removeCriteria: function (criteria) {
        let index = this.mongoCollection.criteria.indexOf(criteria);
        if (index !== -1) {
          this.mongoCollection.criteria.splice(index, 1);
        }
      },
      addCriteria: function () {
        this.mongoCollection.criteria.push({
          key: '',
          value: ''
        })
      },
      closeMongoCollectionDialog : function () {
        this.$refs.mongoCollectionForm.validate((valid) => {
          if(valid){
            this.selfMongoVerifierModal=false;
          }
        });
      },
    }
  }
</script>
